<template>
  <div class="user-container">
    <div class="login-form">
      <div class="title">
        <el-row justify="flex" align="center" >
          <el-col :span="12" @click.native="handleChangeL" :class="{active:activeTab===0}">登陆</el-col>
          <el-col :span="12" class="tab" :class="{active:activeTab===1}" @click.native="handleChangeR">注册</el-col>
        </el-row>
      </div>
      <div class="inputForm">
        <m-login v-if="activeTab===0"></m-login>
        <Register v-else />
      </div>
    </div>
  </div>
</template>

<script>
import Login from '../../components/login'
import Register from '../../components/register'
export default {
  name: '',
  components: {
    'm-login': Login,
    Register
  },
  data () {
    return {
      activeTab: 0
    }
  },
  created () {

  },
  methods: {
    handleChangeL () {
      this.activeTab = 0
    },
    handleChangeR () {
      this.activeTab = 1
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  width: 100%;
  height: 700px;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584883111365&di=354b5662f512054cd3fffcd189e75f40&imgtype=0&src=http%3A%2F%2Fwww.71fang.com%2Fconfig%2Fueditor%2Fphp%2Fupload%2F75971521514060.jpg);
  background-size: cover;
  .login-form{
    padding-bottom: 20px;
    width: 400px;
    margin: 0 auto;
    color: orange;
    background-color: #fff;
    border-radius: 10px;
    transform: translateY(30%);
    .title{
      width: 100%;
      text-align: center;
      background-color: #fff;
      height: 35px;
      .el-col{
        height: 35px;
        line-height: 35px;
      }
      .active{
        background-color: #eee;
        border-top: 2px solid orange;
        color:#000;
      }
    }
    .inputForm{
      width: 350px;
      padding-top: 20px;
      margin:  0 auto;
    }
  }
}
</style>
